<template>
  <div class="q-pa-md">
    <t-stepper
      v-model="step"
      ref="stepper"
      animated
      done-color="deep-orange"
      active-color="purple"
      inactive-color="secondary"
    >
      <t-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
      >
        For each ad campaign that you create, you can control how much you're
        willing to spend on clicks and conversions, which networks and
        geographical locations you want your ads to show on, and more.
      </t-step>

      <t-step
        :name="2"
        title="Create an ad group"
        caption="Optional"
        icon="create_new_folder"
        :done="step > 2"
      >
        An ad group contains one or more ads which target a shared set of
        keywords.
      </t-step>

      <t-step :name="3" title="Create an ad" icon="add_comment">
        Try out different ad text to see what brings in the most customers, and
        learn how to enhance your ads using features like ad extensions. If you
        run into any problems with your ads, find out how to tell if they're
        running and how to resolve approval issues.
      </t-step>

      <template v-slot:navigation>
        <t-stepper-navigation>
          <t-btn
            @click="$refs.stepper.next()"
            color="deep-orange"
            :label="step === 3 ? 'Finish' : 'Continue'"
          />
          <t-btn
            v-if="step > 1"
            flat
            color="deep-orange"
            @click="$refs.stepper.previous()"
            label="Back"
            class="q-ml-sm"
          />
        </t-stepper-navigation>
      </template>
    </t-stepper>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        step: ref(1),
      };
    },
  };
</script>
